<template>
  <div>
    <h2>{{audit}}</h2>
    <h2>学生姓名:{{name}}</h2>
    <h2>学生年龄:{{age}}</h2>
    <h2>学生选课:{{course}}</h2>
    <h2>{{syy}}</h2>

    <h2>{{mm.xx.yy}}</h2>
    <h2><button @click="name += '~' ">姓名+~</button></h2>
    <h2><button @click="age += 1">age+1</button></h2>
    <h2><button @click="deleteIndex">array删1</button></h2>
    <!-- <h2><button @click="syy += '1' ">syy+1</button></h2> -->

    toRefs 用法
    <h2><button @click="mm.xx.yy += '1' ">audits.mm.xx.yy += 1</button></h2>
  </div>
</template>
<script>
  import {ref,toRef,toRefs,reactive} from "vue";

  export default {
    name: "Test",
    setup() {
      let audit = reactive({
        name: 'xfj',
        age: 98,
        course: ['语文', '数学', '英语'],
        mm:{
          xx:{
            yy:'111'
          }
        }
      })

      
      //与原生变量存在桥接关系，改动的话原先对象的值也会跟着改
      // var name = toRef(audit,'name')
      // var age = toRef(audit,'age')
      // var course = toRef(audit,'course')
      // var syy = toRef(audit.mm.xx,'yy')

      
      var audits = toRefs(audit)


      function deleteIndex(){
        audit.course.shift();
      }


      return {
        audit,

        //相当于赋了一个静态值
        // name: audit.name,
        // age: audit.age,
        // course: audit.course,


        //直接使用ref的方式 相当于定义了一个全新的ref对象 与 audit内的数据没有关系了
        // name: ref(audit.name),
        // age: ref(audit.age),
        // course: ref(audit.course)


        //toRef的方式
        // name,
        // age,
        // course:audit.course,
        // syy,


        //toRefs的方式
        ...audits,
        deleteIndex
        
      }
    }
  };
</script>
<style>
</style>